<template>
  <nav class="tab-bar">
    <router-link
      class="tab-item"
      v-for="item in list"
      :key="item.text"
      :to="item.path"
    >
      <!-- <img :src="item.selectedIcon" v-if="currentPath === item.path"/>
      <img :src="item.icon" v-else/> -->
      <i :class="item.icons"></i>
      <span>{{ item.text }}</span>
    </router-link>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          text: "分类",
          selectedIcon:
            "https://m.mi.com/static/img/icon-home-selected.598ca2c8f9.png",
          icon: "https://m.mi.com/static/img/icon-home.c1947eda40.png",
          icons: "iconfont icon-shangpinfenlei",
          path: "/category",
        },
        {
          text: "购物车",
          selectedIcon:
            "https://m.mi.com/static/img/icon-home-selected.598ca2c8f9.png",
          icon: "https://m.mi.com/static/img/icon-home.c1947eda40.png",
          icons: "iconfont icon-gouwuche",
          path: "/cart",
        },
        {
          text: "我的",
          selectedIcon:
            "https://m.mi.com/static/img/icon-home-selected.598ca2c8f9.png",
          icon: "https://m.mi.com/static/img/icon-home.c1947eda40.png",
          icons: "iconfont icon-31wode",
          path: "/center",
        },
      ],
    };
  },
  computed: {
    //获取当前的路由地址
    currentPath() {
      return this.$route.path;
    },
  },
  methods: {
    btnAction() {
      // console.log(this.$router);//获取当前的整个路由对象
      // console.log(this.$route); //当前路由的信息
    },
  },
};
</script>

<style scoped>
.iconfont {
  font-size: 20px;
  color: #333;
}
a {
  color: #333;
}
.router-link-active i {
  color: red;
}
</style>
